<template>
	<view>
		<view class="content">
			<view class="zcHeader">
				<view class="posImg">
					<image src="../../static/bg.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="head_info">
					<view class="head_img">
						<image src="../../static/l1.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
					</view>
					<view>精典数字门店</view>
				</view>
			</view>
			<view class="zcCenter">
				<view class="zcCenter_title">
					<input type="number" value="" maxlength="11" @input="doGetTelephone" placeholder="请输入手机号" />
				</view>
				<view class="zcCenter_title">
					<input type="text" value="" @input="doGetVerifyCode"  placeholder="请输入验证码" />
					<button class="zcBut" :disabled="isVerifyCodeLoading" :loading="isVerifyCodeLoading" @tap="doGetTelephoneVerifyCode" type="primary">{{isVerifyCodeLoading?num:''}}{{text}}</button>
				</view>
			</view>
			<button type="primary" class="zcBut" @tap="doUserBind">绑定</button>
			
		</view>
		
	</view>
</template>

<script>
	
	let _this;
	export default {
		data() {
			return {
				Telephone:'',
				VerifyCode:'',
				isVerifyCodeLoading:false,
				num:60,
				text:'获取验证码',
				clearNumber:0
			}
		},
		onLoad() {
			_this = this;
		},
		methods: {
			doGetTelephone(res) {
				// console.log('doGetTelephone = ',res.detail.value);
				_this.Telephone = res.detail.value;
			},
			doGetVerifyCode(res) {
				// console.log('doGetVerifyCode = ',res.detail.value);
				_this.VerifyCode = res.detail.value;
			},
			doGetTelephoneVerifyCode() {
				if (!_this.Telephone) {
					uni.showModal({
						title: '温馨提示',
						content: '尊敬的用户，请输入手机号！'
					});
					return;
				}
				_this.isVerifyCodeLoading = true;
				_this.text = '重新获取'
				_this.clearNumber = setInterval(function () {
					_this.num = _this.num-1;
					if (_this.num === 0) {
						_this.num = 60;
						_this.isVerifyCodeLoading = false;
						clearInterval(_this.clearNumber);
					}
				},1000)
					
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: 'false',//根据需求而定
					Paras: {
					    Name: 'Uni_Partner_Detail',
					    Action: 'Ext_getTelephoneVerifyCode',
					    Data: {
							Telephone:_this.Telephone
						}
					},
					Callback: function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('验证码 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								_this.num = 60;
								_this.isVerifyCodeLoading = false;
								_this.text = '重新获取';
								clearInterval(_this.clearNumber);
								return;
							}
						}else {
							uni.hideLoading();
						}
						
					},
					Scope: _this
				})
			},
			doUserBind() {
				if (!_this.Telephone) {
					uni.showModal({
						title: '温馨提示',
						content: '尊敬的用户，请输入手机号！'
					});
					return;
				}
				if (!_this.VerifyCode) {
					uni.showModal({
						title: '温馨提示',
						content: '尊敬的用户，请输入验证码！'
					});
					return;
				}
				
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				
				
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: 'false',//根据需求而定
					Paras: {
					    Name: 'Uni_Partner_Detail',
					    Action: 'Ext_BindRegistryUser',
					    Data: {
							Telephone:_this.Telephone,
							VerifyCode:_this.VerifyCode
						}
					},
					Callback: function(resjson,scope) {
						uni.hideLoading();
						console.log('绑定 = ',resjson);
						if (!resjson.success) {
							uni.showModal({
								title:'温馨提示',
								showCancel:false,
								content:''+resjson.msg
							})
							return;
						}
					
						uni.switchTab({
							url:'../home/home'
						})

					},
					Scope: _this
				})
			}
		}
	}
</script>

<style>
	.content{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		/* padding: 60upx; */
	}
	.posImg{position: relative;width: 100%;}
	.head_info{position: absolute;bottom: 0;}
	.head_img{width: 200upx;height: 200upx;overflow: hidden;border-radius: 20%;}
	.head_info view:last-child{font-size: 36upx;color: #3CA4FA;display: flex;align-items: center;justify-content: center;letter-spacing: 6upx;}
	.zcHeader{
		display: flex;
		flex-direction: column;
		align-items: center;
		/* padding: 60upx; */
		font-size: 50upx;
		/* font-weight: bold; */
		padding-bottom: 140upx;
		/* border-bottom: 3upx solid #999999; */
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}
	.zcCenter{display: flex;flex-direction: column;padding: 60upx 0 100upx 0;width: 70%;}
	.zcCenter_title{width: 100%;border-bottom: 4upx solid #E5E5E5;display: flex;align-items: flex-end;justify-content: center;}
	.zcCenter_title input{padding: 10upx;text-align: left;width: 100%;}
	.zcCenter_title button{margin: 0;font-size: 25upx;width: 70%;padding: 10upx 0;margin: 20upx 0upx 10upx 0;line-height: 1.8;}
	.zcCenter_info{font-weight: 600;color: #999999;}
	.zcCenter_info:before{
		content: '\e608';
		color: #3CA4FA;
	}
	.zcBut{background-color: #3ca4fa!important;padding: 20upx 0;font-size: 36upx;border-radius: 48upx;line-height: 1;width: 80%;margin-bottom: 40upx;}

</style>
